        <script setup>

        import { computed, watch, ref } from 'vue';
        import { QuestionCircleOutlined } from '@ant-design/icons-vue';
        const props = defineProps({
            password: {
                type: String,
                default: "",
            },

            // 左边距
            paddingLeft: {
                type: Number,
                default: 5
            }
        })

        // 强 颜色
        const strongColor = '#33CC33'
        // 中颜色
        const mediumColor = '#FFB84D'
        // 弱颜色
        const enoughColor = '#FF6666'

        // 密码强度渲染数组
        const showColor = ref([{ color: "transparent", key: 1 },
        { color: "transparent", key: 2 },
        { color: "transparent", key: 3 },])

        const passwordTips = ref('请输入密码')



        // 密码强度 - 强
        const strongRegex = new RegExp(/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/);
        // const strongRegex = new RegExp(/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/);

        //密码为八位及以上并且大小写字母、数字、特殊字符三项中有两项，强度是中等
        const mediumRegex = new RegExp(/^(?=.*[a-z].*[A-Z]|.*[A-Z].*[a-z]|.*[a-z].*\d|.*\d.*[a-z]|.*[a-z].*[!@#$%^&*? ]|.*[!@#$%^&*? ].*[a-z]|.*[A-Z].*\d|.*\d.*[A-Z]|.*[A-Z].*[!@#$%^&*? ]|.*[!@#$%^&*? ].*[A-Z]|.*\d.*[!@#$%^&*? ]|.*[!@#$%^&*? ].*\d).{6,}$/);
        // const mediumRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])|(?=.*[a-z])(?=.*[0-9])|(?=.*[a-z])(?=.*[\\W_!@#$%^&*`~()\\-+=])|(?=.*[A-Z])(?=.*[0-9])|(?=.*[A-Z])(?=.*[\\W_!@#$%^&*`~()\\-+=])|(?=.*[0-9])(?=.*[\\W_!@#$%^&*`~()\\-+=]).{6,}$");
        // /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/
        // 弱
        const enoughRegex = new RegExp("(?=.{8,}).*", "g");


        watch(() => props.password, (nv, ov) => {
            // debugger
            showColor.value = testPassword(nv)
        })

        const testPassword = (nv) => {
            console.log(nv, '我是Miami');
            // debugger
            const zhong = mediumRegex.test(nv)
            const qiang = strongRegex.test(nv)
            console.log(zhong, '强度中');

            if (!nv.trim().length) {
                passwordTips.value = '请输入密码'
                return [
                    { color: "transparent", key: 1 },
                    { color: "transparent", key: 2 },
                    { color: "transparent", key: 3 },
                ]
            }
            if (qiang) {
                console.log('强');
                passwordTips.value = '强'
                return [
                    { color: strongColor, key: 1 },
                    { color: strongColor, key: 2 },
                    { color: strongColor, key: 3 },
                ]
            }
            if (zhong) {
                console.log('中');
                passwordTips.value = '中'
                return [
                    { color: mediumColor, key: 1 },
                    { color: mediumColor, key: 2 },
                    { color: "transparent", key: 3 },
                ]
            }
            console.log(mediumRegex.test(nv), '弱');
            passwordTips.value = '弱'
            return [
                { color: enoughColor, key: 1 },
                { color: "transparent", key: 2 },
                { color: "transparent", key: 3 },
            ]
        }


</script>
        
<template>
    <div class="password_tips" :style="{ 'padding-left': props.paddingLeft + 'px' }">
        <div class="cryptographic_strength">
            <div class="svg_box">
                <div class="passwor_show_box">
                    <div class="passwor_show_box_item" v-for="(i, index) in showColor" :key="i.key" :style="{
                        'background-color': i.color
                    }"></div>
                </div>
                <span class="cryptographic_strength_text">{{ passwordTips }}</span>
                <a-tooltip placement="top">
                    <template #title>
                        <span>密码建议同时包含字母、数字、特殊符号。</span>
                    </template>
                    <div style="display: flex; align-items: center; cursor: pointer;">
                        <QuestionCircleOutlined></QuestionCircleOutlined>
                    </div>
                </a-tooltip>
            </div>
            <div class="bottom_tips_box" v-if="passwordTips == '弱' || passwordTips == '请输入密码'">
                <span class="is_tips">请输入安全性较强的密码，确保账号安全。</span>
            </div>
        </div>
    </div>
</template>


<style lang="less" scoped>
.password_tips {
    padding: 5px 10px;

    // 密码强度
    .cryptographic_strength {
        .bottom_tips_box {
            display: flex;
            gap: 5px;

            .is_tips {
                color: var(--ss-error-color);
                font-size: 14px;
            }
        }

        .svg_box {
            // margin-bottom: 10px;
            display: flex;
            align-items: center;

            .passwor_show_box {
                display: flex;
                gap: 5px;

                .passwor_show_box_item {
                    width: 40px;
                    height: 8px;
                    background-color: pink;
                    border: 0.5px solid #c9c9c9;
                }
            }

            .cryptographic_strength_text {
                font-size: 14px;
                margin-left: 10px;
                margin-right: 5px;
                color: #727272;
                // line-height: 99px;
            }
        }


    }
}
</style>